<template>
  <div class="notlogin" ref="notlogin">
    <div class="tishi">
      <div class="el-icon-close chacha" @click="xiaoshiFn"></div>
      <div class="tishi_font">您还未登录哟~</div>
      <!-- 跳转至登录页面 -->
      <router-link to="/login"><div class="tishi_btn">确认</div></router-link>
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    xiaoshiFn() {
      console.log("消失");
      console.log(this.$refs.notlogin);
      this.$refs.notlogin.style.display = "none";
    },
  },
};
</script>
<style lang="scss" scoped>
.notlogin {
  width: 1400px;
  height: 650px;
  margin: 0 auto;
  background-color: rgba(10, 20, 10, 0.4);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  .tishi {
    width: 200px;
    height: 200px;
    background-color: #fff;
    position: absolute;
    border-radius: 20px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    color: black;
    border: 2px solid #ccc;
    box-shadow: 2px 2px 2px 2px;
    .chacha {
      font-size: 24px;
      position: absolute;
      right: 5px;
      background-color: #ccc;
      border-radius: 4px;
    }
    .tishi_font {
      margin-top: 80px;
      font-size: 18px;
      font-family: Georgia, "Times New Roman", Times, serif;
    }
    .tishi_btn {
      margin-top: 25px;
      width: 50px;
      border-radius: 10px;
      background-color: skyblue;
      font-size: 16px;
      margin-left: 100px;
    }
  }
}
</style>
